<template>
  <div id="app">
<!--    <router-link to="home" tag="button">我是首页</router-link>-->
<!--    <router-link to="about" tag="button">我是关于</router-link>-->
    <button v-on:click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
<!--    <router-link v-bind:to="'/user/'+userId">用户</router-link>-->
    <router-link :to="'/user/'+userId">用户</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'app',
    data(){
        return{
            userId:'123'
        }
    },
    methods:{
        homeClick(){
            const p=this.$router.history.current.path;
            if("/home"!==p) {
                this.$router.push("/home");
            }
        },
        aboutClick(){
            this.$router.push("/about");
        }
    }
}
</script>

<style>
  .router-link-active{
    color: red;
  }
</style>
